Passing data across <slot/>

Posted on 2023-04-22 by

henrikvilhelmberglund

We may want to pass data to a parent across a slot in the child component. How do we do this?

We can use props in the slot !

0
Component: 0
appCount: 0
componentCount: 0
<script>
	import Component from "./Component.svelte";

	let appCount = 0;
</script>

<button on:click={() => appCount--}>-</button>
{appCount}
<button on:click={() => appCount++}>+</button>

<!-- the let directive here allows us to use the count variable from the child component in the fragment -->
<Component>
	<svelte:fragment let:count>
		appCount: {appCount} 
    <br>
    componentCount: {count}
	</svelte:fragment>
</Component>

<style>
</style>

What if we want to use the variable name count in both the parent and child though? We can give a specific name to the let binding .

0
Component: 0
appCount: 0
componentCount: 0
<script>
	import Component2 from "./Component2.svelte";

	let count = 0;
</script>

<button on:click={() => count--}>-</button>
{count}
<button on:click={() => count++}>+</button>

<!-- the let directive here allows us to use the count variable from the child component in the fragment -->
<!-- by changing the name after ={} we can bind the variable to another name -->
<Component2>
	<svelte:fragment let:count={countFromComponent}>
		appCount: {count}
		<br />
		componentCount: {countFromComponent}
	</svelte:fragment>
</Component2>

<style>
</style>

Actually passing data

Let's try to get some data out of the fragment and into the main script tag. How do we accomplish this?`

If we want to get data into the parent component (which has the fragment) we can run functions inside of the fragment .

0
Component: 0
appCount: 0
componentCount: 0 
<script>
	import Component3 from "./Component3.svelte";

	let count = 0;

	function inc(delta) {
		count += delta;
	}
</script>

<button on:click={() => count--}>-</button>
{count}
<button on:click={() => count++}>+</button>

<!-- the let directive here allows us to use the count variable from the child component in the fragment -->
<!-- by changing the name after ={} we can bind the variable to another name -->
<Component3>
	<svelte:fragment let:count={countFromComponent}>
		appCount: {count}
		<br />
		componentCount: {countFromComponent}
		<br />
		<button on:click={() => inc(5)}>+5</button>
	</svelte:fragment>
</Component3>

<style>
</style>

For the data in the child component, we can add a function to it as a prop and bind to it using the let directive. Since we don't want to override the function in the parent we change the name in the let directive again.

This is an example of binding to the function in the child.
0
Component: 0
appCount: 0
componentCount: 0 

<script>
	import Component4 from "./Component4.svelte";

	let count = 0;

	function inc(delta) {
		count += delta;
	}
</script>

<button on:click={() => count--}>-</button>
{count}
<button on:click={() => count++}>+</button>

<!-- the let directive here allows us to use the count variable from the child component in the fragment -->
<!-- by changing the name after ={} we can bind the variable to another name -->
<Component4>
	<svelte:fragment let:count={countFromComponent} let:inc={incInComponent}>
		appCount: {count}
		<br />
		componentCount: {countFromComponent}
		<br />
		<button on:click={() => inc(5)}>+5</button>
		<br />
		<button on:click={() => incInComponent(5)}>+5 to component</button>
	</svelte:fragment>
</Component4>

<style>
</style>